<script setup>

defineProps({
  img: String,
  name: String,
  price: Number
})
</script>

<template>
  <div class = "ReleaseContent">
    <div class = "img">
      <img :src = img alt = "Game">
    </div>
    <div class = "content">
      <span class = "title">{{ name }}</span>
      <span class = "name">
        <span v-if = "price<=0">
          免费
        </span>
        <span v-if = "price>0">
          <b>￥</b>{{ price }}
        </span>
      </span>
    </div>
  </div>
</template>

<style scoped>
.ReleaseContent {
  display: flex;
}

img, content {
  display: inline-block;
}

.img {
  img {
    width: 100%;
    height: 120%;
    line-height: 80px;
    text-align: center;
  }

  width: 160px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
}

.content {
  > span {
    display: block;
    line-height: 40px;
  }

  .title {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .name {
    span {
      padding: 2px;
      background: rgba(189, 189, 189, 0.89);
      border-radius: 3px;
    }

  }

  margin-left: 10px;
}
</style>